<template>
	<view class="mine-container">
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-nav-bg.png" mode="widthFix"
			class="property-bg"></image>

		<view class="index-nav" :style="{
			background: scrollTop > 30 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
			<view class="status_bar">

			</view>
			<view class="flex items-center justify-between py-32 relative hidden">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-title.png"
					style="height: 40rpx;" mode="heightFix"></image>
				<image :src="userInfo.avatar" mode="" class="image-56 round border index-nav-avatar absolute" :style="{
					bottom: (scrollTop - 130 >= 15 ? 15 : scrollTop - 130) + 'px'
				}"></image>
				<view class="flex items-center" style="width: 40%;flex-direction: row-reverse;">
					<!-- #ifndef MP-WEIXIN -->
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_shezhi@2x.png"
						class="image-48 " mode="" @click="$tab.nav(`/pages/mine/setting/index`)"></image>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_xiaoxi@2x.png"
						class="image-48 mr-20" mode="" @click="$tab.nav(`/pages/index/notice/index`)"></image>
					<!-- #endif -->
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/lingjinfen.gif" class="mr-20"
						style="width: 64rpx;height: 64rpx;" mode="" @click="$tab.nav(`/pages/mine/store/storeJin`)"
						v-if="shoreJin"></image>

					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/fuwujingtie@3x.png"
						class="mr-20" style="width: 64rpx;height: 64rpx;" mode=""
						@click="jintieValue='',jingtieShow=true"></image>
				</view>
			</view>
		</view>

		<view class="">
			<view class="status_bar">

			</view>
			<view class="" style="height: 112rpx;">

			</view>
		</view>

		<view class="content px-20" style="margin-top: 40rpx;">
			<view class="flex items-center">
				<image :src="userInfo.avatar" mode="" class="image-144 round border"></image>
				<view class="ml-16" style="width: calc(100% - 200rpx);">
					<view class="flex items-center mt-24 ">
						<view class="text-32 font-700 text-FFF u-line-1" style="max-width: 200rpx;">
							{{userInfo.nickName}}
						</view>
						<scroll-view scroll-x style="white-space: nowrap;width: 400rpx;">
							<view class="flex items-center">
								<view class="vip ml-16 text-center text-FFF text-20 px-20"
									v-for="(item,index) in userInfo.levels" :key="item.levelId" :class="{
									'storeVip' : index % 2 == 0
								}">
									{{handleLevelName(item.levelName)}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="text-9E9E9E mt-16 u-line-1" v-if="userInfo.signature">
						{{userInfo.signature}}
					</view>
					<view class="text-9E9E9E mt-16 u-line-1" v-else style="opacity: 0;">
						占位
					</view>
				</view>
			</view>

			<view class="flex justify-between items-center mt-48">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/goumaiyue@2x.png"
					class="image-144" mode="" @click="$tab.nav(`/pages/mine/buyAmount`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/jinriqiandao@2x.png"
					class="image-144" mode="" @click="$tab.nav(`/pages/mine/signIn`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/wodetuandui@2x.png"
					class="image-144" mode="" @click="$tab.nav(`/pages/mine/team`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/shangjiaruzhu@2x.png"
					class="image-144" mode="" @click="$tab.nav(`/pages/mine/storeYuji`)"></image>
				<!-- 	<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/cnayuxuexi@2x.png"
					class="image-144" mode="" @click="studyValue='',studyShow=true"></image> -->
				<!-- #ifdef MP-WEIXIN -->
			<!-- 	<view class="image-144">

				</view> -->
				<!-- #endif -->
			</view>

			<view class="py-32 px-16 mt-24 round-24" style="background-color: rgba(255,186,67,.7);color: #6D320D;">
				<view class="flex items-center justify-between" @click="goOrder(0,1)">
					<view class="text-36 font-700">
						我的订单
					</view>
					<view class="flex items-center">
						<view class="mr-8">
							全部
						</view>
						<u-icon name="arrow-right" color="#6D320D" :bold="true"></u-icon>
					</view>
				</view>

				<view class="flex items-center justify-between mt-24 px-20">
					<view class="flex flex-col items-center" v-for="(item,index) in orderStatusList" :key="item.index"
						v-if="item.icon" @click="goOrder(item.index,1)">
						<view class="relative">
							<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/${item.icon}`"
								mode="" class="image-48">
							</image>
							<view class="jiao text-FFF round text-center font-700" v-if="item.orderNum > 0">
								{{item.orderNum}}
							</view>
						</view>
						<view class="text-36 mt-20">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<view class="py-32 px-16 mt-24 round-24" style="background-color: rgba(255,186,67,.7);color: #6D320D;">
				<view class="flex items-center justify-between" @click="goOrder(0,2)">
					<view class="text-36 font-700">
						我的票券
					</view>
					<view class="flex items-center">
						<view class="mr-8">
							全部
						</view>
						<u-icon name="arrow-right" color="#6D320D" :bold="true"></u-icon>
					</view>
				</view>

				<view class="flex items-center justify-between mt-24 px-20">
					<view class="flex flex-col items-center" v-for="(item,index) in dikouList" :key="item.index"
						v-if="item.icon" @click="goOrder(item.index,2)">
						<view class="relative">
							<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/${item.icon}`"
								mode="" class="image-48">
							</image>
							<view class="jiao text-FFF round text-center font-700" v-if="item.orderNum > 0">
								{{item.orderNum}}
							</view>
						</view>
						<view class="text-36 mt-20">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<div class="px-44 py-32 mt-24 round-16 flex items-center justify-between"
				style="background: rgba(255,186,67,.7);color: #6D320D;"
				@click="$tab.nav(`/pages/mine/currency/profit`)">
				<div class="flex items-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/shouyi@2x.png" mode=""
						class="image-72"></image>

					<div class="ml-24 flex flex-col items-center">
						<!-- <div class="text-40 font-700">32553</div> -->
						<div class="text-36 font-700">我的收益</div>
					</div>
				</div>

				<div class="detail flex items-center justify-around">
					<div class="flex items-center">
						<div class="">详情</div>
						<u-icon name="arrow-right" color="#6D320D" size="14"></u-icon>
					</div>
				</div>
			</div>

			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/kuaisu_banner@2x.png"
				class="w-full mt-12" mode="widthFix" @click="$tab.nav(`/pages/property/fast`)"></image>



			<view class="py-32 px-16 mt-24 round-24">
				<view class="text-32 font-700">
					其他功能
				</view>
				<view class="mt-32 pb-20">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(item, index) in funList" :key="index" @click="handleFun(item)"
							v-if="item.show">
							<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/${item.icon}`"
								class="image-56" />
							<text class="grid-text mt-12">{{ item.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="flex flex-col items-center copyright text-grey mt-48" @click="handleCopyright">
				<view class="text-28">
					版权所有：农商互融(陕西)农业科技发展有限公司
				</view>
				<view class="text-24 mt-12">
					陕ICP备2024030015号-2A
				</view>
			</view>

			<view class="" style="height: 200rpx;">

			</view>
		</view>

		<u-popup :show="studyShow" @close="studyShow = false" :safe-area-inset-bottom="false" bgColor="transparent"
			mode="center">
			<view class="study-wrap relative">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
					class="study-close" @click="studyShow = false"></image>


				<input type="text" class="study-input" placeholder="请输入兑换码" v-model="studyValue" />

				<view class="study-btn text-center text-FFF text-32" @click="studyConfirm">
					确认兑换
				</view>
			</view>
		</u-popup>

		<u-popup :show="jingtieShow" @close="jingtieShow = false" :safe-area-inset-bottom="false" bgColor="transparent"
			mode="center">
			<view class="study-wrap relative jingtie">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
					class="study-close" @click="jingtieShow = false"></image>


				<input type="text" class="study-input" placeholder="请输入兑换码" v-model="jintieValue" />

				<view class="study-btn text-center text-FFF text-32" @click="jingtieConfirm">
					确认兑换
				</view>
			</view>
		</u-popup>


		<u-popup :show="redEnvelopeShow" @close="handleRedClose" mode="center" round="16" bgColor="transparent"
			:closeable="true">
			<view class="redEnvelope-wrap relative" @click="handleRedClose">
				<view class="flex flex-col items-center redEnvelope-content">
					<view class="font-500" style="font-size: 64rpx;">
						支付成功
					</view>
					<view class="redEnvelope-title font-500 mt-32">
						恭喜您获得获得金积分
					</view>
					<view class="redEnvelope-price">
						{{payStoreGetPrice}}
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/kai@2x.png" class="kai"
						:class="{
						'kai-animation':redEnvelopeAnimation
					}" mode=""></image>
				</view>
			</view>
		</u-popup>

		<u-popup :show="redEnvelopeEndShow" mode="center" round="16" bgColor="transparent">
			<view class="redEnvelope-wrap-end">

			</view>
		</u-popup>


		<u-popup :show="serviceShow" mode="center" round="16" bgColor="transparent" @close="serviceShow = false">
			<view class="service-wrap bg-FFF">
				<view class="service-wrap-nav relative">
					<view class="close" @click="serviceShow = false">
						<u-icon name="close" :bold="true" color="#FF6E27"></u-icon>
					</view>
				</view>
				<view class="service-wrap-content py-48 px-32 flex items-center flex-wrap justify-between">
					<view class="flex flex-col items-center" style="width: 50%;" @click="handleGoNext(1)">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shichangkefu@2x.png"
							mode="" class="image-96"></image>
						<view class="text-32 mt-20">
							市场客服
						</view>
					</view>
					<view class="flex flex-col items-center" style="width: 50%;" @click="handleGoNext(2)">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_jishukefu@2x.png"
							mode="" class="image-96"></image>
						<view class="text-32 mt-20">
							技术客服
						</view>
					</view>
					<view class="flex flex-col items-center mt-32" style="width: 50%;" @click="handleGoNext(3)">
						<image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shangjiawuliukefu@2x.png"
							mode="" class="image-96"></image>
						<view class="text-32 mt-20">
							商家物流客服
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<Exchange :show="payStoreShow" :form="payStoreForm" @close="payStoreClose"></Exchange>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				scrollTop: 0,
				orderStatusList: this.$appConfig.orderStatusList,
				dikouList: this.$appConfig.dikouList,

				funList: [{
						title: '个人信息',
						icon: 'icon_gerenxinxi@2x.png',
						path: "/pages/mine/setting/userModify",
						show: true
					},
					{
						title: '我的收藏',
						icon: 'icon_shoucang@2x.png',
						path: "/pages/mine/collect",
						show: true
					},
					{
						title: '我的门店',
						icon: 'icon_wodemendian@2x.png',
						path: "/pages/mine/store/index",
						show: true
					},
					{
						title: '抵扣券核销',
						icon: 'icon_hexiao@3x.png',
						path: "/pages/mine/writeOff/storeOrder/index",
						show: false
					},
					// #ifdef MP-WEIXIN
					{
						title: '我的资产',
						icon: 'icon_zichan@2x.png',
						path: "/pages/property/index",
						show: true
					},
					// #endif
					{
						title: '分享app',
						icon: 'icon_fenxiang@2x.png',
						path: "/pages/mine/qrCode",
						show: true
					},
					{
						title: '地址管理',
						icon: 'icon_dizhiguanli@2x.png',
						path: "/pages/mine/address/list",
						show: true
					},
					{
						title: '扫一扫',
						icon: 'icon_saoyisao@2x.png',
						path: "",
						show: true
					},
					{
						title: '我的银行卡',
						icon: 'icon_wodeyinhangka@2x.png',
						path: "/pages/mine/bankCard/bankCard",
						show: true
					},
					{
						title: '联系客服',
						icon: 'icon_lianxikefu@2x.png',
						path: "",
						show: true
					},
					// #ifndef MP-WEIXIN
					{
						title: '在线客服',
						icon: 'icon_lianxikefu@2x.png',
						path: "",
						show: true
					},
					// #endif
					// #ifdef MP-WEIXIN
					{
						title: '消息',
						icon: 'icon_xiaoxi@2x.png',
						path: "/pages/index/notice/index",
						show: true
					},
					{
						title: '设置',
						icon: 'icon_shezhi@2x.png',
						path: "/pages/mine/setting/index",
						show: true
					},
					// #endif

				],

				userRichInfo: {
					balance: 0,
					jindou: 0,
					xiaofeijin: 0,
					jinjifen: 0,
				},

				payStoreShow: false,
				payStoreForm: null,
				payStoreGetPrice: 0,

				studyShow: false,
				studyValue: "",

				shoreJin: false,

				redEnvelopeShow: false,
				redEnvelopeValue: [],
				redEnvalopeIndex: 1,
				redEnvelopeEndShow: false,
				redEnvelopeAnimation: false,


				serviceShow: false,

				jingtieShow: false,
				jintieValue: ""
			}
		},
		computed: {
			userInfo() {
				if (this.$store.state.user.userInfo.isWriter == 1) {
					this.funList[3].show = true
				}

				return this.$store.state.user.userInfo
			},
		},
		onLoad(e) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			thro = this
		},
		onShareAppMessage() {

		},
		onShow() {
			this.getData()
			this.$store.dispatch('GetInfo')
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			handleLevelName(name) {
				// 截取前俩个字符
				return name.slice(0, 2)
			},
			payStoreClose(jinjifen) {
				this.payStoreShow = false
				if (jinjifen) {
					this.redEnvelopeShow = true
					this.payStoreGetPrice = jinjifen
				}
			},
			handleGoNext(type) {
				// switch (type) {
				// 	case 1:
				// 		this.$tab.nav(`/pages/chat2/chatIndex?groupId=2237&title=市场客服&isGroup=0&id=5891`)
				// 		break;
				// 	case 2:
				// 		this.$tab.nav(`/pages/chat2/chatIndex?groupId=2236&title=技术客服&isGroup=0&id=299`)
				// 		break;
				// 	case 3:
				// 		this.$tab.nav(`/pages/chat2/chatIndex?groupId=2235&title=物流客服&isGroup=0&id=5864`)
				// 		break;
				// }
				let phone, title
				switch (type) {
					case 1:
						phone = '15291601551'
						title = '市场客服'
						break;
					case 2:
						phone = '15102912568'
						title = '技术客服'
						break;
					case 3:
						phone = '17792634509'
						title = '商家物流客服1'
						break;
					case 4:
						phone = '17791290326'
						title = '商家物流客服2'
						break;
				}
				this.$Api.chat.bindService({
					userName: phone,
					title: title
				}).then(res => {
					this.$tab.nav(
						`/pages/chat/index?groupId=${res.data.groupId}&title=${e.title}&isGroup=0&id=${res.data.otherUserId}`
					)
					this.serviceShow = false
				})
				// // #ifdef APP
				// plus.share.getServices(
				// 	res => {
				// 		let sweixin = null;
				// 		for (let i in res) {
				// 			if (res[i].id == 'weixin') {
				// 				sweixin = res[i];
				// 			}
				// 		}
				// 		//唤醒微信小程序
				// 		if (sweixin) {
				// 			sweixin.launchMiniProgram({
				// 				id: 'gh_54cde2bc9b29', //微信开放平台 --- 绑定的微信小程序的 --- 原始id
				// 				type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
				// 				path: `/pages/index/index?phone=${phone}&title=${title}` //小程序的页面,用传的参数在小程序接值判断跳转指定页面
				// 			});
				// 		} else {
				// 			this.$modal.msg('请先安装微信!')
				// 		}
				// 	}
				// );
				// // #endif
			},
			handleRedClose() {
				this.redEnvelopeAnimation = true
				setTimeout(() => {
					this.redEnvelopeShow = false
					this.redEnvelopeEndShow = true
					this.redEnvelopeAnimation = false
					this.redEnvalopeIndex = 2
					setTimeout(() => {
						this.redEnvelopeEndShow = false
					}, 1500)
				}, 2000)
				return
				if (this.redEnvalopeIndex == 1) {
					this.redEnvelopeAnimation = true
					setTimeout(() => {
						this.redEnvelopeShow = false
						this.redEnvelopeEndShow = true
						this.redEnvelopeAnimation = false
						this.redEnvalopeIndex = 2
						setTimeout(() => {
							this.redEnvelopeEndShow = false
							this.redEnvelopeShow = true
						}, 1500)
					}, 2000)
				} else {
					this.redEnvelopeAnimation = true
					setTimeout(() => {
						this.redEnvelopeShow = false
						this.redEnvelopeEndShow = true
						this.redEnvelopeAnimation = false
						setTimeout(() => {
							this.redEnvelopeEndShow = false
						}, 1500)
					}, 2000)
				}
			},
			handleCopyright() {
				// #ifdef APP
				plus.runtime.openURL('https://beian.miit.gov.cn/')
				// #endif
			},
			studyConfirm: throttle(2000, async () => {
				if (thro.studyValue == "") {
					thro.$modal.msg('请输入兑换码!')
					return
				}
				const res = await thro.$Api.index.convertMoney(thro.studyValue)
				thro.$modal.msg('兑换成功!')
				thro.studyShow = false
			}, {
				noTrailing: true
			}),
			jingtieConfirm: throttle(2000, async () => {
				if (thro.jintieValue == "") {
					thro.$modal.msg('请输入兑换码!')
					return
				}
				const res = await thro.$Api.index.convertMoneyExchange({
					code: thro.jintieValue
				})
				thro.$modal.msg('兑换成功!')
				thro.jingtieShow = false
			}, {
				noTrailing: true
			}),
			handleFun(item) {
				if (item.path != '') {
					this.$tab.nav(item.path)
					return
				}
				if (item.index) {
					let site = getApp().globalData.config.appInfo.agreements[item.index]
					this.$tab.nav(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
					return
				}
				switch (item.title) {
					case "扫一扫":
						uni.scanCode({
							scanType: ['qrCode'],
							success: (res) => {
								let url = res.result
								if (url.indexOf('https://d.fulewanjia.com') == 0) {
									console.log(res.result)
									let tem = url.split('&')
									this.payStoreForm = {
										inviteCode: tem[0].split('?')[1],
										name: tem[1].split('=')[1],
										rate: tem[2].split('=')[1],
										// #ifdef APP
										payWay: 2,
										// #endif
										// #ifdef MP-WEIXIN
										payWay: 0,
										// #endif
										price: "",
										// divideType: 1,
										storeName: tem[3].split('=')[1],
										openBalancePay: tem[4].split('=')[1],
									}
									this.payStoreShow = true

								} else {
									this.$modal.msg('暂不支持此APP外的其他二维码!')
								}
							}
						})
						break
					case "联系客服":
						uni.makePhoneCall({
							phoneNumber: '13649245396' //仅为示例
						});
						break
					case "在线客服":
						this.serviceShow = true
						break
					default:
						this.$modal.msg('功能尚在开放中!')
				}
			},
			goOrder(index, type) {
				this.$tab.nav(`/pages/mine/order/orderList?index=${index}&type=${type}`)
			},
			async getData() {
				const userRichInfo = await this.$Api.user.userRichInfo()
				userRichInfo.data.forEach(item => {
					switch (item.moneyName) {
						case "余额":
							this.userRichInfo.balance = item.amount
							break
						case "金豆":
							this.userRichInfo.jindou = item.amount
							break
						case "消费金":
							this.userRichInfo.xiaofeijin = item.amount
							break
						case "金积分":
							this.userRichInfo.jinjifen = item.amount
							break
					}
				})


				const store = await this.$Api.store.appgetstores()
				if (store.data) {
					this.shoreJin = true
				}

				if (store.data && this.userInfo.storeZfbOpenId) {
					this.funList[2].show = true
				}

				const userOrderstatistics = await this.$Api.index.userOrderstatistics()

				this.orderStatusList[1].orderNum = userOrderstatistics.noPay
				this.orderStatusList[2].orderNum = userOrderstatistics.noSend
				this.orderStatusList[3].orderNum = userOrderstatistics.noTake
				this.orderStatusList[5].orderNum = userOrderstatistics.finished

				const userOrderstatistics2 = await this.$Api.index.userOrderstatistics({
					columnType: 12
				})

				this.dikouList[1].orderNum = userOrderstatistics2.noPay
				this.dikouList[2].orderNum = userOrderstatistics2.noSend
				this.dikouList[3].orderNum = userOrderstatistics2.finished
				this.dikouList[4].orderNum = userOrderstatistics2.canceled
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.index-nav-avatar {
		left: 50%;
		transform: translateX(-50%);
	}

	.service-wrap {
		border-radius: 44rpx;

		.service-wrap-nav {
			width: 560rpx;
			height: 148rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_zaixiankefu@2x.png) no-repeat;
			background-size: 100% 100%;

			.close {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
			}
		}

		.service-wrap-content {
			width: 560rpx;
		}
	}

	.property-bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			width: 112rpx;
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}

	}

	.content {
		position: relative;
		z-index: 2;
		width: 100%;

		.vip {
			background-size: 100% 100%;
			background: linear-gradient(to right, #56A3FC, #E156FD);
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			border-radius: 0 16rpx 0 16rpx;
		}

		.storeVip {
			background: linear-gradient(to right, #A9EA47, #42DAD0);
		}

		.property {
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-property-bg1@2x.png') no-repeat;
			background-size: 100% 100%;
			padding: 32rpx 16rpx 28rpx 16rpx;
		}
	}

	/deep/ .u-grid-item {
		margin-top: 32rpx !important;
	}

	.jiao {
		background: #FF0F0F;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		position: absolute;
		right: -16rpx;
		top: -6rpx;
		z-index: 1;
		font-size: 20rpx;
	}

	.redEnvelope-wrap {
		width: 628rpx;
		height: 880rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_hongbao@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 116rpx 0 22rpx 0;
		color: #E9CA9A;
		animation: fadeIn 1.5s forwards;

		.redEnvelope-price {
			font-size: 100rpx;
			font-weight: 700;
			margin-top: 78rpx;
		}

		.kai {
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			left: calc(50% - 74rpx);
			bottom: 158rpx;
		}

		.kai-animation {
			animation: float 2s forwards;
			transform-style: preserve-3d;
		}
	}

	.redEnvelope-wrap-end {
		width: 750rpx;
		height: 750rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_linquchenggong@3x.png) no-repeat;
		background-size: 100% 100%;
	}

	@keyframes float {
		from {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}

		to {
			transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
		}
	}

	/* 定义关键帧 */
	@keyframes fadeIn {
		from {
			right: -72rpx;
		}

		to {
			right: 0rpx;
		}
	}


	.study-wrap {
		width: 666rpx;
		height: 560rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_canyuxuexi@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 236rpx 36rpx 0 36rpx;

		.study-input {
			width: 594rpx;
			height: 92rpx;
			background: #F8F8F8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			line-height: 92rpx;
			text-align: center;
		}

		.study-btn {
			width: 594rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			line-height: 92rpx;
			margin-top: 88rpx;
		}

		.study-close {
			position: absolute;
			right: 44rpx;
			top: 120rpx;
			width: 64rpx;
			height: 64rpx;
		}
	}

	.jingtie {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages4/img_canyuxuexi@3x.png) no-repeat;
		background-size: 100% 100%;
	}

	.detail {
		width: 152rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		color: #6D320D;
		line-height: 1;
	}
</style>